import { FC, useContext } from "react";
import styles from "./index.module.less";
import { BigScreenContext, CurrentKey } from "../../context/BigScreenContext";
import classNames from "classnames";
import { message } from "@supcon/supcon-5t-design";

export interface IFooterCardProps {
  title: string;
  currentKey: CurrentKey;
}

const mockData = {
  path: [
    // 操作路径
    {
      tagName: "TI_11137.PV", // 位号名
      value: [810, 811, 822, 833, 844, 855, 866, 877, 888, 899], // 目标设定值，第一个为当前，第二个为第一步， 以此类推
      time: [10, 2.2, 2.8, 3.1, 4.7, 3.5, 3.5, 3.5, 3.5, 3.5], // 调整时间，第一个为当前，第二个为第一步， 以此类推
      pastValue: [
        800, 802, 805, 808, 810, 813, 815, 818, 820, 823, 825, 828, 830, 833,
        835, 838, 840, 843, 845, 848, 850,
      ], // 历史值
      unit: "℃", // 目标设定值单位
      desc: "1#裂解炉A炉膛COT温度", // 位号描述
      timeUnit: "h", // 调整时间单位
    },
    {
      tagName: "TI_12137.PV", // 位号名
      // value: [820, 834.6, 835.8, 837.1], // 目标设定值，第一个为当前，第二个为第一步， 以此类推
      // time: [10, 2.8, 3.1, 4.7], // 调整时间，第一个为当前，第二个为第一步， 以此类推
      value: [820, 834.6, 835.8, 837.1, 838.2], // 目标设定值，第一个为当前，第二个为第一步， 以此类推
      time: [10, 2.8, 3.1, 4.7, 3.5], // 调整时间，第一个为当前，第二个为第一步， 以此类推
      pastValue: [
        820, 820, 820, 820, 820, 820, 820, 820, 820, 820, 820, 820, 820, 820,
        820, 820, 820, 820,
      ], // 历史值
      unit: "℃", // 目标设定值单位
      desc: "1#裂解炉B炉膛COT温度", // 位号描述
      timeUnit: "h", // 调整时间单位
    },
  ],
  timeInfo: [
    {
      // 时间信息
      remainTime: "11.4", // 剩余调整时间
      remainTimeUnit: "h", // 剩余调整时间单位
    },
  ],
  constraint: [
    // 约束变量
    {
      tagName: "AI_30281.PV", // 约束变量名
      desc: "1#裂解炉B炉膛COT温度", // 约束变量描述
      value: [100, 110, 120, 121, 122], // 值，前2个为实线，后三个为虚线
      currentConstraintValue: "110", // 当前值
      constraintValue: "<120", // 约束值
    },
  ],
  operation: [
    // 操作变量
    {
      tagName: "TI_11137.PV", // 操作变量名
      desc: "1#裂解炉B炉膛XXX", // 操作变量描述
      currentOperationValue: "833", // 当前值
      targetValue: "838", // 最终优化目标
    },
  ],
  finalExecuteTime: "2025-04-07 00:30:00", // 最后执行时间
  nextExecuteTime: "2025-04-07 01:30:00", // 下次执行时间
};

const mockDataParam = {
  factoryNodeName: "2#裂解炉",
};

const FooterCard: FC<IFooterCardProps> = (props: IFooterCardProps) => {
  const bigScreenContext = useContext(BigScreenContext);
  const onClick = () => {
    if (props.currentKey === undefined) {
      message.warning("当前模块暂未开发");
      return;
    }
    bigScreenContext.setCurrentKey(props.currentKey);
    if (props.currentKey === "path") {
      bigScreenContext.setPathJson(mockData);
    }
    if (props.currentKey === "param") {
      bigScreenContext.setParamJson(mockDataParam);
    }
  };

  return (
    <div
      onClick={onClick}
      className={classNames([
        styles["footer-card"],
        props.currentKey === bigScreenContext.currentKey
          ? styles["is-active"]
          : undefined,
        props.currentKey === undefined ? styles["display"] : undefined,
      ])}
    >
      <div className={styles["footer-card-body"]}></div>
      <div className={styles["content"]}>{props.title}</div>
    </div>
  );
};

export default FooterCard;
